<template lang="pug">
  ModuleWrapper(title="全州核酸检测概况" flex="1")
    StaticView.static-item(label="全州检测总量" :value="F0000001" icon="nucleic-acid-collection-point")
    SectionWrapper(title="各县核酸采样数量" flex="unset")
      StaticSimpleList(:listData="areaData")
    SectionWrapper(title="全州当日当月已完成采样数量" flex="unset")
      RealTimeCard(:dataset="realTimeData")
    SectionWrapper(title="全州核酸检测趋势")
      div.chart-wrap(ref="chartTrend")
    SectionWrapper(title="全州核酸检测分布")
      div.chart-wrap(ref="chartNumber")
</template>

<script>
export default {
  name: "ModuleDetectionSurvey",
  props: {
  	areaData:{
  		type:Array,
  		required:false
  	},
	realTimeData:{
		type:Array,
		required:false
	},
	leftTrend:{
		type:Array,
		required:false
	},
	F0000001:{
	  type:String,
	  required:false
	}
  },
  data() {
    return {
      charts: {
        trend: null,
        number: null,
      },
	  /*
      realTimeData: [
        {
          label: '采集总数',
          value: 11658,
          compare: {
            label: '较昨日',
            value: 124,
          }
        },
        {
          label: '打包总人数',
          value: 66324,
          compare: {
            label: '较昨日',
            value: 3125,
          }
        },
      ],
      areaData: [
        {
          label: '芒市',
          value: 154,
        },
        {
          label: '瑞丽市',
          value: 241,
        },
        {
          label: '梁河县',
          value: 16,
        },
        {
          label: '盈江县',
          value: 14,
        },
        {
          label: '陇川县',
          value: 22,
        },
      ]*/
    }
  },
  watch: {
    leftTrend: {
      handler(v) {
        this.renderChart1();
      },
      deep: true,
    },
    areaData: {
      handler(v) {
        this.renderChart2();
      },
      deep: true,
    }
  },
  methods: {
    renderChart1() {
      this.$nextTick(() => {
        this.charts.trend = this.$echarts.init(this.$refs['chartTrend']);
        this.charts.trend.setOption({
          grid: {
            top: '10%',
            right: '0%',
            left: '0%',
            bottom: '0%',
            containLabel: true,
            show: true,
            borderColor: 'transparent',
            backgroundColor: 'rgba(0, 73, 104, 0.19)'
          },
          xAxis: {
            type: 'category',
            data: [this.leftTrend[5].time.toString(), this.leftTrend[4].time.toString(), this.leftTrend[3].time.toString(), this.leftTrend[2].time.toString(), this.leftTrend[1].time.toString(), this.leftTrend[0].time.toString()],
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.3)'
              }
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            }
          },
          series: [{
            data: [parseInt(this.leftTrend[5].value), parseInt(this.leftTrend[4].value), parseInt(this.leftTrend[3].value), parseInt(this.leftTrend[2].value), parseInt(this.leftTrend[1].value), parseInt(this.leftTrend[0].value)],
            type: 'line',
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: '#FA6141',
              width: 5
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(226, 117, 91, 0.4)'
              }, {
                offset: 1,
                color: 'rgba(240, 123, 95, 0)'
              }])
            },
          }]
        });
      });

    },
    renderChart2() {
      this.$nextTick(() => {
        this.charts.number = this.$echarts.init(this.$refs['chartNumber']);
        this.charts.number.setOption({
          grid: {
            top: '10%',
            right: '0%',
            left: '0%',
            bottom: '0%',
            containLabel: true,
            show: true,
            borderColor: 'transparent',
            backgroundColor: 'rgba(0, 73, 104, 0.19)'
          },
          xAxis: {
            type: 'category',
            data: ['芒市', '瑞丽市', '陇川县', '盈江县', '梁河县'],
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            }
          },
          series: [{
            data: [this.areaData[0].value, this.areaData[1].value, this.areaData[2].value, this.areaData[3].value, this.areaData[4].value],
            type: 'bar',
            smooth: true,
            showSymbol: false,
            barWidth: 10,
            itemStyle: {
              color: '#05FDBB',
              width: 5
            },
          }]
        });
      });
    }
  },
  mounted() {
    this.renderChart1();
    this.renderChart2();
  }
}
</script>

<style lang="scss" scoped>
.module{
  min-width: rem(460);
  flex: 5 !important;
  display: flex;
  flex-direction: column;
  .content-container{
    padding-top: rem(28);
    flex: 1;
    display: flex;
    flex-direction: column;
    .static-row{
      display: flex;
      margin-bottom: rem(30);
      .static-item{
        flex: 1;
      }
    }
    .block-title{
      margin: rem(30) 0 rem(25);
    }
    .chart-wrap{
      flex: 1;
    }
  }
}
</style>
